<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="../css/mui.min.css" rel="stylesheet" />
			<link href="../css/mui.picker.css" rel="stylesheet" />
		<link href="../css/mui.poppicker.css" rel="stylesheet" />
		<style>
			html,body {
						height: 100%;
						margin: 0px;
						font-family:PingFang-SC-Medium;
						padding: 0px;
					}
					.mui-bar{
						background: #FFFFFF;
						box-shadow:none;
					}
					.mui-input-group .mui-input-row{
						
						height: 54px;
					}
					
					.mui-input-row label{
						
						padding: 21px  15px;
					}
				.mui-titles{
					position: relative;
					float: right;
				}
					.mui-switch{
					width: 51px;
					height: 25px;
				}
				.mui-switch .mui-switch-handle{
					width: 23px;
					height: 23px;
				}
				.mui-switch:before{
					content: "";
				}
				.mui-switch.mui-active:before{
					
					content: "";
				}
				.mui-input-clear{
					height: 54px!important;
					line-height: 54px!important;
				}
				.mui-content{
					position: relative;
					float: left;
					width: 100%;
					padding: 10px  0px;
					display: inline-block;
					background: #FFFFFF;
					height: calc(100% - 44px);
				}		
				.biaoti{
					position: relative;
					float: left;
					width: calc(100% - 44px);
					height: 100%;
					display: flex;
					justify-content: space-around;
					padding-top: 5px;
					box-sizing: border-box;
				}
				
				.mui-input-group{
					height: 100%;
				}
				.biaoti>div{
					width: 64px;
					height: 35px;
					font-size:15px;
		            font-weight:bold;
		            color:rgba(255,255,255,1);
					line-height: 35px;
					box-sizing: border-box;
				}
			.tiactive{
					border-bottom: 2px  solid #FFFFFF;
			}
				
				.mui-bar-nav>img:nth-child(1){
					position: relative;
					float: left;
					width: 20px;
					height: 27px;
					margin-top: 10px;
				}
				.mynews{
					position: absolute;
					width: 22px;
					height: 100%;
					right: 15px;
					z-index: 10;
				}
				.mynews>img:nth-child(1){
					width: 22px;
					height: 22px;
					margin-top: 10px;
				}
				.mynews>img:nth-child(2){
						width: 7px;
						height: 7px;
						position: absolute;
						top: 10px;
						right: 0px;
				}
					
				a{
					color:rgba(51,51,51,1);
				}
				a:active{
						color:rgba(51,51,51,1);
					}
					
				.dans{
					position: relative;
					float: left;
					width: 100%;
					border-bottom: 7px  solid  rgba(248,248,248,1);
					padding:15px  14px ;
					box-sizing: border-box;
				}	
			.dans>div:nth-child(1){
				position: relative;
				float: left;
				width: 100%;
				height: 19px;
			}	
			.dans>div:nth-child(1)>div:nth-child(1){
				position: relative;
				float: left;
				width: 60px;
				height: 19px;
				 line-height: 19px;
				font-size:13px;
                font-weight:500;
                color:rgba(51,51,51,1);
			}	
			.dans>div:nth-child(1)>div:nth-child(2){
				position: relative;
				float: left;
				width: 60px;
				height: 19px;
				 line-height: 19px;
				font-size:13px;
			    font-weight:500;
			    color:rgba(51,51,51,1);
			}	
			.dans>div:nth-child(1)>div:nth-child(3){
					position: relative;
					float: left;
					width: calc(100% - 120px);
					height: 19px;
					 line-height: 19px;
					font-size:13px;
				    font-weight:500;
				    color:rgba(51,51,51,1);
				}
					
				.dans>div:nth-child(2){
					position: relative;
					float: left;
					width: 100%;
					margin-top: 10px;
					border-bottom:  1px  solid rgba(248,248,248,1);
border-radius:1px;
padding-bottom: 10px;
				}	
				.dans>div:nth-child(2)>div:nth-child(1){
					position: relative;
					float: left;
					width: 60px;
					height: 100%;
					 line-height: 19px;
					font-size:13px;
				    font-weight:500;
				    color:rgba(51,51,51,1);
				}	
				.dans>div:nth-child(2)>div:nth-child(2){
					position: relative;
					float: left;
					height: 100%;
					width: calc(100% - 60px);
					 line-height: 19px;
					font-size:13px;
				    font-weight:500;
				    color:rgba(51,51,51,1);
				}		
			.dans>div:nth-child(3){
					position: relative;
					float: left;
					width: 100%;
					height:40px;
				}		
				.dans>div:nth-child(3) >.mui-radio{	
					position: relative;
					width: 50%;
					left: 0px!important;
					height: 40px;
					box-sizing: border-box;
					clear: none;
					float: left;
					padding-top: 5px;
				}
				
				.mui-table-view-cell {
	            padding: 16px 15px;
	}
				
				input[type=radio]{
					left:0px!important;
						margin-top: 5px;
				}
				
				.mui-radio.mui-left label {
					padding-left: 33px;
			     	font-size:14px;
				}
				.mui-checkbox input[type=checkbox]:checked:before, .mui-radio input[type=radio]:checked:before{
					color: red;
				}
					.dans>div:nth-child(3)>div:nth-child(2){
						position: relative;
						float: right;
						width: 50%;
						height: 40px;
						margin-top: 12px;
					}
				.dans>div:nth-child(3)>div:nth-child(2)>div{
					position: relative;
					float: right;
					width: 60px;
					height: 26px;
					border:1px solid rgba(223,223,223,1);
                    border-radius:3px;
					text-align: center;
					font-size:14px;
                     font-weight:500;
                     color:rgba(153,153,153,1);
                     line-height:26px;
					 margin-right: 15px;
				}
				.newadd{
					position: absolute;
					right: 15px;
					line-height: 44px;
					font-size: 16px;
				}
					.mui-btn {
					font-size: 16px;
					padding: 8px;
					margin: 3px;
				}
				h5.mui-content-padded {
					margin-left: 3px;
					margin-top: 20px !important;
				}
				h5.mui-content-padded:first-child {
					margin-top: 12px !important;
				}
				.ui-alert {
					text-align: center;
					padding: 20px 10px;
					font-size: 16px;
				}
				.mui-input-row .mui-btn{
					width: 63%;
					border: none;
					height: 100%;
					text-align: left;
					padding-left: 0px;
					margin: 0px;
				}
				
				#switch{
					position: relative;
					float: left;
					width: 100%;
					list-style: none;
				}
				.mui-switch{
					top:46%!important;
				margin-top: 3px!important;
				right: 0px!important;
				}
				.mui-switch.mui-active:before{
					content: "";
				}
					.mui-switch.mui-active:after{
					content: "";
				}
				.mui-switch:before{
					content: none;
				}
				.mui-switch.mui-active {
				border-color: red;
				background-color: red;	  
			 }
			 
			 
			 .hang{
				 height:10px;
background:rgba(248,248,248,1);
border-radius:1px;
				 
			 }
			 
			 .lasta:after{
				 height: 0px!important;
			 } 
			 .mui-input-group:after{
				 height: 0px;
			 }
			 
			 .submit{
				 position: absolute;
				 width: 100%;
				 height: 44px;
				 bottom: 20px;
				 				background:linear-gradient(180deg,rgba(252,126,119,1) 0%,rgba(254,96,93,1) 100%);
				 box-shadow:0px 5px 8px 0px rgba(254, 95, 99, 0.35);
				 border-radius:20px;
				 text-align: center;
				 font-size:16px;
	             font-weight:bold;
	             color:rgba(255,255,255,1);		
				 line-height: 44px;
			 }
			 
			 .mui-switch.mui-active .mui-switch-handle {
			     -webkit-transform: translate(43px,0);
			     transform: translate(24px,0)!important;
			 }
		</style>
	</head>
	<body contextmenu="return false;">
    <header class="mui-bar mui-bar-nav">
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1  class="mui-title">修改收货地址</h1>
   </header>		
		<div class="mui-content"  id="content">
				 <form class="mui-input-group">
				 	<div class="mui-input-row">
				 		<label>收货人:</label>
				 		<input type="text" class="mui-input-clear" id='name' value=""  placeholder="">
				 	</div>
					<div class="mui-input-row">
						<label>手机号码:</label>
						<input type="text" class="mui-input-clear" id='phone' value="" placeholder="">
					</div>
					<div class="mui-input-row">
						<label>选择地址:</label>
						<button id='showCityPicker3'  class="mui-btn mui-btn-block" type='button'></button>
					<div id='cityResult3' class="ui-alert"></div>
					</div>
					
					
					<div class="mui-input-row">
						<label>详细地址:</label>
						<input type="text" class="mui-input-clear" id="dir" value="" placeholder="">
					</div>
					
					
					
					<div class="mui-input-row  lasta">
						<li id="switch" class="mui-table-view-cell">
							设置为默认地址
							<div class="mui-switch" id="statuss">
								<div class="mui-switch-handle"></div>
							</div>
						</li>
					</div>
					
					<div class="hang"></div>
					<div  class="submit">保存地址</div>
				 </form>
		</div>
	</body>
		<script src="../js/mui.min.js"></script>
		<script src="../js/jquery-3.1.1.min.js"></script>
		<script src="../js/mui.picker.js"></script>
		<script src="../js/mui.poppicker.js"></script>
		<script src="../js/city.data.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/city.data-3.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" charset="utf-8">
		 mui.init({
		 		  beforeback: function() {　　　　
		 		  var list = plus.webview.currentWebview().opener();　　　　
		 		  //refresh是A页面自定义事件
		 		  mui.fire(list, 'refresh');
		 		 //返回true,继续页面关闭逻辑
		 		  return true;
		 		  },
		 		 });
		 	(function($, doc) {
				mui.plusReady(function(){
					var url = plus.storage.getItem('url');
					var user = plus.storage.getItem('user');
					user = JSON.parse(user);
					var id = plus.webview.currentWebview().addressid;
					var shen = '';
					var shi = '';
					var xian = '';
					var statuss = '';
					// mui.alert(id)
					mui.post(url+'/juyou/address/getmyaddress',{token:user.token,id:id},function(res){
						if(res.code==200){
							document.getElementById('name').value = res.data.name;
							document.getElementById('phone').value = res.data.phone;
							shen = res.data.shen;
							shi = res.data.shi;
							xian = res.data.xian;
							document.getElementById('showCityPicker3').innerHTML = shen+' '+shi+' '+xian;
							document.getElementById('dir').value = res.data.dir;
							if(res.data.status==1){
								statuss = '1';
								document.getElementById('statuss').classList.add('mui-active')
							}else{
							statuss = '0';	
							}
						}else{
							mui.toast(res.msg);
						}
					})
					
					$.init();
					$.ready(function() {
						/**
						 * 获取对象属性的值
						 * 主要用于过滤三级联动中，可能出现的最低级的数据不存在的情况，实际开发中需要注意这一点；
						 * @param {Object} obj 对象
						 * @param {String} param 属性名
						 */	
						var _getParam = function(obj, param) {
							return obj[param] || '';
						};
						//普通示例
						var userPicker = new $.PopPicker();
						//-----------------------------------------
						//级联示例
						var cityPicker = new $.PopPicker({
							layer: 2
						});
						//-----------------------------------------
						//					//级联示例
						var cityPicker3 = new $.PopPicker({
							layer: 3
						});
						// cityData3 = ['四川省','成都市','青羊区'];
						cityPicker3.setData(cityData3);
						var showCityPickerButton = document.getElementById('showCityPicker3');
						var cityResult3 = document.getElementById('cityResult3');
						showCityPickerButton.addEventListener('tap', function(event) {
							cityPicker3.show(function(items) {
								// cityResult3.innerText = "你选择的城市是:" + _getParam(items[0], 'text') + " " + _getParam(items[1], 'text') + " " + _getParam(items[2], 'text');
								shen = _getParam(items[0], 'text');
								shi = _getParam(items[1], 'text');
								xian = _getParam(items[2], 'text');
								var str =  shen+' '+ shi+' '+xian;
								document.getElementById('showCityPicker3').innerHTML = str;
								//返回 false 可以阻止选择框的关闭
								//return false;
								// $("#showCityPicker3").text( _getParam(_getParam(items[0], 'text') + " " + _getParam(items[1], 'text') + " " + _getParam(items[2], 'text'))
							// 
							
							});
						}, false);
					});
					mui('#content').on('tap','.submit',function(){
						var name = document.getElementById('name').value;
						var dir = document.getElementById('dir').value;
						var phone = document.getElementById('phone').value;
						// plus.nativeUI.showWaiting();
						mui.post(url+'/juyou/address/changeaddress',{token:user.token,id:id,shen:shen,status:statuss,shi:shi,xian:xian,dir:dir,name:name,phone:phone},function(res){
							// plus.nativeUI.closeWaiting();
							mui.toast(res.msg);
							if(res.code==200){
								setTimeout(function(){
									mui.back();
								},1500);
							}
						})
					
					})
					document.getElementById("statuss").addEventListener('toggle', function(event) {
						if(statuss=='0'){
							statuss ='1';
						}else{
							statuss = '0';
						}
						});
				
					
				})
		 	
		 })(mui, document);

		</script>
</html>
